<template>
  <div class="container">
    <h1>Key Expansion | 密钥扩展</h1>
    <div class="grid">
      <div class="cell -6of12 card cell__cipherkey">
        <header class="card-header">密钥</header>
        <div class="card-content inner">
          <div class="hex--container">
            <div class="hex--hex" v-for="(_, index) in cipherkey">
              <input
                class="form-control"
                type="text"
                :placeholder="cipherkey[index].toString(16)"
                @keyup="inputKeyup(index, $event.target.value)">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="cell -6of12 card cell__cipherkey">
        <header class="card-header">扩展密钥</header>
        <div class="card-content inner">
          <div class="exp--container">
            <div
              @click="clickColumn(columnIndex)"
              :class="expColumnClass(columnIndex)"
              :roundkey="~~(columnIndex/4)"
              :col="'w' + columnIndex"
              v-for="(column, columnIndex) in expandedKey">
              <div v-for="(item, itemIndex) in column" class="exp--item">
                {{item.toString(16)}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="cell -6of12 card cell__cipherkey">
        <header class="card-header">w{{chosen}}</header>
        <div class="card-content inner inner--more">
          <div class="exp--more">
            <div class="exp--column column__chosen" :col="'w' + chosen">
              <div
                v-for="item in expandedKey[chosen]"
                class="exp--item">
                {{item.toString(16)}}
              </div>
            </div>
            <p>&nbsp;=&nbsp;</p>
            <!-- w-4 -->
            <div class="exp--column column__sup" :col="'w' + (chosen-4)">
              <div
                v-for="item in expandedKey[chosen-4]"
                class="exp--item">
                {{item.toString(16)}}
              </div>
            </div>
            <p>&nbsp;⊕&nbsp;</p>
            <!-- w-1'' -->
            <div v-if="chosen % 4 == 0" class="exp--column" :col="'w' + (chosen-1) + '′′'">
              <div
                v-for="item in subWord(rotWord(expandedKey[chosen-1]))"
                class="exp--item">
                {{item.toString(16)}}
              </div>
            </div>
            <!-- w-1 -->
            <div v-else class="exp--column column__sup" :col="'w' + (chosen-1)">
              <div
                v-for="item in expandedKey[chosen-1]"
                class="exp--item">
                {{item.toString(16)}}
              </div>
            </div>
            <div class="exp--more" v-if="chosen % 4 == 0">
              <p>&nbsp;⊕&nbsp;</p>
              <div class="exp--column" :col="'Rcon' + chosen">
                <div
                  v-for="item in rCon[chosen/(cipherkey.length/4)]"
                  class="exp--item">
                  {{item.toString(16)}}
                </div>
              </div>
              <p>&nbsp;，其中&nbsp;</p>
              <div class="exp--column column__sup" :col="'w' + (chosen-1)">
                <div
                  v-for="item in expandedKey[chosen-1]"
                  class="exp--item">
                  {{item.toString(16)}}
                </div>
              </div>
              <p>&nbsp;- RotWord ->&nbsp;</p>
              <div class="exp--column" :col="'w' + (chosen-1) + '′'">
                <div
                  v-for="item in rotWord(expandedKey[chosen-1])"
                  class="exp--item">
                  {{item.toString(16)}}
                </div>
              </div>
              <p>&nbsp;- SubBytes ->&nbsp;</p>
              <div class="exp--column" :col="'w' + (chosen-1) + '′′'">
                <div
                  v-for="item in subWord(rotWord(expandedKey[chosen-1]))"
                  class="exp--item">
                  {{item.toString(16)}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss'>
  .cell__cipherkey {
    width: 100%;
  }
  .cell__cipherkey .hex--hex,
  .exp--column .exp--item {
    width: 67px;
  }
  .exp--container {
    box-sizing: border-box;
    overflow-y: visible;
    display: flex;
    flex-flow: row nowrap;
    height: 162px;
    width: 100%;
    position: relative;
    overflow-x: scroll;
  }
  .exp--column {
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
    height: 160px;
    position: relative;
    box-sizing: border-box;
    border: 1px solid transparent;
  }
  .exp--column:after {
    top: 0;
    left: 1em;
    position: absolute;
    width: 12em;
    content: attr(col);
    color: #ccc;
    z-index: -1
  }
  .exp--item {
    height: 40px;
    line-height: 40px;
    flex: 0 0 25%;
    text-align: center;
    color: #aaa;
  }
  .column__extra:before {
    bottom: 0;
    left: 1em;
    position: absolute;
    width: 12em;
    content: 'Round Key ' attr(roundkey);
    font-size: 22px;
    font-weight: 900;
    color: #dfdfdf;
    z-index: -1
  }
  .column__chosen {
    border: 1px solid #000;
  }
  .column__sup {
    border: 1px solid #aaa;
  }
  .column__extra {
    border-left: 2px solid #000;
    position: relative;
  }
  .exp--more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
  }
  .inner--more {
    overflow-x: scroll;
  }
</style>

<script>
import aesjs from 'aes-js'
export default {
  props: [],
  data() {
    return {
      chosen: 4,
      cipherkey: [0x2b, 0x7e, 0x15, 0x16,
              0x28, 0xae, 0xd2, 0xa6,
              0xab, 0xf7, 0x15, 0x88,
              0x09, 0xcf, 0x4f, 0x3c],
      rCon: [ [ 0x00, 0x00, 0x00, 0x00 ],
              [ 0x01, 0x00, 0x00, 0x00 ],
              [ 0x02, 0x00, 0x00, 0x00 ],
              [ 0x04, 0x00, 0x00, 0x00 ],
              [ 0x08, 0x00, 0x00, 0x00 ],
              [ 0x10, 0x00, 0x00, 0x00 ],
              [ 0x20, 0x00, 0x00, 0x00 ],
              [ 0x40, 0x00, 0x00, 0x00 ],
              [ 0x80, 0x00, 0x00, 0x00 ],
              [ 0x1b, 0x00, 0x00, 0x00 ],
              [ 0x36, 0x00, 0x00, 0x00 ] ]
    }
  },
  components: {

  },
  methods: {
    clickColumn(column) {
      const Nk = this.cipherkey.length / 4
      if (column >= Nk) {
      this.chosen = column
      // 密钥长度（以字为单位）：128/192/256 位密钥为 4/6/8
        if (column % Nk == 0) {
          console.log('extra', column);
        } else {
          console.log(column,this.expandedKey[column].map(item => {return item.toString(16)}));
          console.log(column - 1,this.expandedKey[column - 1].map(item => {return item.toString(16)}));
          console.log(column - 4,this.expandedKey[column - 4].map(item => {return item.toString(16)}));
        }
      }
    },
    expColumnClass(column) {
      const Nk = this.cipherkey.length / 4
      // 密钥长度（以字为单位）：128/192/256 位密钥为 4/6/8
      let rtn = 'exp--column'
      if (column && column % Nk == 0) {
        rtn += ' column__extra'
      }
      if (this.chosen >= Nk) {
        if (column == this.chosen) {
          rtn += ' column__chosen'
        }
        if (column + Nk == this.chosen || column + 1 == this.chosen) {
          rtn += ' column__sup'
        }
      }
      return rtn
    },
    inputKeyup(index, value) {
      const num = aesjs.utils.hex.toBytes(value)[0]
      if (num < 256) this.$set(this.cipherkey, index, num)
    },
    subWord(rtn) {
      const sBox = [ 0x63,0x7c,0x77,0x7b,0xf2,0x6b,0x6f,0xc5,0x30,0x01,0x67,0x2b,0xfe,0xd7,0xab,0x76,
             0xca,0x82,0xc9,0x7d,0xfa,0x59,0x47,0xf0,0xad,0xd4,0xa2,0xaf,0x9c,0xa4,0x72,0xc0,
             0xb7,0xfd,0x93,0x26,0x36,0x3f,0xf7,0xcc,0x34,0xa5,0xe5,0xf1,0x71,0xd8,0x31,0x15,
             0x04,0xc7,0x23,0xc3,0x18,0x96,0x05,0x9a,0x07,0x12,0x80,0xe2,0xeb,0x27,0xb2,0x75,
             0x09,0x83,0x2c,0x1a,0x1b,0x6e,0x5a,0xa0,0x52,0x3b,0xd6,0xb3,0x29,0xe3,0x2f,0x84,
             0x53,0xd1,0x00,0xed,0x20,0xfc,0xb1,0x5b,0x6a,0xcb,0xbe,0x39,0x4a,0x4c,0x58,0xcf,
             0xd0,0xef,0xaa,0xfb,0x43,0x4d,0x33,0x85,0x45,0xf9,0x02,0x7f,0x50,0x3c,0x9f,0xa8,
             0x51,0xa3,0x40,0x8f,0x92,0x9d,0x38,0xf5,0xbc,0xb6,0xda,0x21,0x10,0xff,0xf3,0xd2,
             0xcd,0x0c,0x13,0xec,0x5f,0x97,0x44,0x17,0xc4,0xa7,0x7e,0x3d,0x64,0x5d,0x19,0x73,
             0x60,0x81,0x4f,0xdc,0x22,0x2a,0x90,0x88,0x46,0xee,0xb8,0x14,0xde,0x5e,0x0b,0xdb,
             0xe0,0x32,0x3a,0x0a,0x49,0x06,0x24,0x5c,0xc2,0xd3,0xac,0x62,0x91,0x95,0xe4,0x79,
             0xe7,0xc8,0x37,0x6d,0x8d,0xd5,0x4e,0xa9,0x6c,0x56,0xf4,0xea,0x65,0x7a,0xae,0x08,
             0xba,0x78,0x25,0x2e,0x1c,0xa6,0xb4,0xc6,0xe8,0xdd,0x74,0x1f,0x4b,0xbd,0x8b,0x8a,
             0x70,0x3e,0xb5,0x66,0x48,0x03,0xf6,0x0e,0x61,0x35,0x57,0xb9,0x86,0xc1,0x1d,0x9e,
             0xe1,0xf8,0x98,0x11,0x69,0xd9,0x8e,0x94,0x9b,0x1e,0x87,0xe9,0xce,0x55,0x28,0xdf,
             0x8c,0xa1,0x89,0x0d,0xbf,0xe6,0x42,0x68,0x41,0x99,0x2d,0x0f,0xb0,0x54,0xbb,0x16 ]
      for (let i=0; i<4; i++) {
        rtn[i] = sBox[rtn[i]]
      }
      return rtn
    },
    rotWord(r) {
      return [r[1], r[2], r[3], r[0]]
    }
  },
  computed: {
    expandedKey() {
      // 每一列的大小固定为4
      const Nk = this.cipherkey.length / 4
      // 密钥长度（以字为单位）：128/192/256 位密钥为 4/6/8
      const Nr = Nk + 6
      // 回合数：128/192/256 位回合为 10/12/14

      const w = new Array(4 * (Nr + 1))
      let temp = new Array(4)

      // 初始化密钥扩展的前Nk列
      for (let i = 0; i < Nk; i++) {
        const r = [this.cipherkey[4 * i],
                   this.cipherkey[4 * i + 1],
                   this.cipherkey[4 * i + 2],
                   this.cipherkey[4 * i + 3]]
        w[i] = r
      }

      // 剩余列的扩展密钥
      for (let i = Nk; i < (4 * (Nr + 1)); i++) {
        w[i] = new Array(4)
        for (let t = 0; t < 4; t++) {
          temp[t] = w[i - 1][t]
        }
        // 每 Nk 轮都有额外的转换
        if (i % Nk == 0) {
          temp = this.subWord(this.rotWord(temp))
          for (let t = 0; t < 4; t++) temp[t] ^= this.rCon[i / Nk][t]
        }
        // 256 位密钥中每 4 个列 subWord() 一次
        else if (Nk > 6 && i % Nk == 4) {
          temp = this.subWord(temp)
        }
        // 异或 w[i]、w[i-1]、w[i-Nk]
        for (let t = 0; t < 4; t++) {
          w[i][t] = w[i - Nk][t] ^ temp[t]
        }
      }
      return w
    },
  },
  mounted() {

  }
}
</script>
